<template>

<el-dialog
	v-model="add_small_visible"
	:title=" '添加小类' "
	:close-on-click-modal='false'
	:close-on-press-escape='false'
	:show-close='false'
>
	<el-form :model="add_small_variable" :rules="add_small_rules" ref="add_small_ref"
					 :label-position=" 'right' " label-width="90px">

		<el-form-item prop="big_name" label="所属大类">
			<FuzzySearchBigVer2 @DataUse="big_auto_complete_in_small_dialog($event as any)"
											ref="big2_clear_ref"
											:disable="false"
											:content=" '' "
											@DataClear="big2_clear"/>
		</el-form-item>

    <el-form-item label="大类前缀">
      {{ show_big_prefix }}
    </el-form-item>

		<el-form-item prop="no" label="小类编号">
			<el-input v-model="add_small_variable.no" autocomplete="off"/>
		</el-form-item>

		<el-form-item prop="small_name" label="小类名称">
			<el-input v-model="add_small_variable.small_name" autocomplete="off"/>
		</el-form-item>

		<el-form-item prop="models" label="型号">
			<el-input v-model="add_small_variable.models" autocomplete="off"/>
		</el-form-item>

		<el-form-item prop="units" label="单位">
			<el-input v-model="add_small_variable.units" autocomplete="off"/>
		</el-form-item>

		<el-form-item prop="place" label="放置位置">
			<el-input v-model="add_small_variable.place" autocomplete="off"/>
		</el-form-item>

	</el-form>
	<template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel_add_small()">取消</el-button>
				<el-button type="primary" @click="add_small()">确定</el-button>
      </span>
	</template>
</el-dialog>

</template>

<script setup lang="ts">
import {reactive, ref} from "vue";
import {ElMessage, FormInstance, FormRules} from "element-plus";
import {SmallTableCRUDResponse} from "@/api/first/PartsManagement/type.ts";
import {reqSmallList} from "@/api/first/PartsManagement";
const add_small_ref = ref<FormInstance>()
const big2_clear_ref = ref()
import FuzzySearchBigVer2, {BigAutoCompletion} from "@/components/first/FuzzySearchBigVer2.vue";
// 清空添加框内的内容后
const big2_clear = () => {
	add_small_variable.big_name = ''
	add_small_variable.big_id = ''
}
// 增删改查所需携带的变量
const add_small_variable = reactive<{
	big_name: string
	big_id: number | ''
	no: string
	small_name: string
	models: string
	units: string
	place: string
}>({
	big_name: '',  // 该小类所属大类的名称
	big_id: 0,  // 该小类所属大类的名称
	no: '', // 小类零件编号
	small_name: '', // 小类名称
	models: '', // 型号
	units: '', // 单位
	place: '', // 放置位置
})
const add_small_visible = ref(false) // 决定添加和修改框是否显示
const add_small_rules = reactive<FormRules>({
	big_name: [{
		type: 'string',
		message: '请选择所属大类',
		required: true,
	}],
	no: [{
		type: 'string',
		message: '小类编号需要满足要求',
		max: 20,
		min: 1,
		required: true,
	}],
	small_name: [{
		type: 'string',
		message: '小类名称需要小于等于100个字符',
		max: 100,
		min: 1,
		required: true,
	}],
	models: [{
		type: 'string',
		message: '型号需要小于等于100个字符',
		max: 100,
		min: 1
	}],
	units: [{
		type: 'string',
		message: '单位需要小于等于5个字符',
		max: 5,
		min: 1,
		required: true,
	}],
	place: [{
		type: 'string',
		message: '摆放位置需要小于等于10个字符',
		max: 10,
		min: 1
	}]
})

// 关闭添加小类框
const cancel_add_small = () => {
	add_small_visible.value = false
}

const open = () => {
	add_small_ref.value?.clearValidate()
	big2_clear_ref.value?.clear_input()

	add_small_variable.big_name = ''
	add_small_variable.big_id = ''
	add_small_variable.no = ''
	add_small_variable.small_name = ''
	add_small_variable.models = ''
	add_small_variable.units = ''
	add_small_variable.place = ''

	add_small_visible.value = true
}

defineExpose({open});

// 在添加小类框中选择其所属大类
const big_auto_complete_in_small_dialog = (cmy: BigAutoCompletion) => {
	add_small_variable.big_name = cmy.big_name
	add_small_variable.big_id = cmy.big_id
  show_big_prefix.value = cmy.prefix
  add_small_variable.no = cmy.prefix
}
const show_big_prefix = ref('')
// 添加小类
const add_small = async () => {
	await add_small_ref.value?.validate()
	const res: SmallTableCRUDResponse = await reqSmallList({
		mode: "create",
		create: {
			no: add_small_variable.no,
			small_name: add_small_variable.small_name,
			models: add_small_variable.models,
			units: add_small_variable.units,
			place: add_small_variable.place,
			big_id: add_small_variable.big_id as number,
		}
	})
	add_small_visible.value = false
	ElMessage.success(res.success?.message)
}
</script>

<style scoped>

</style>